﻿@{
	ViewBag.Title = "SysUserRightManage";
	Layout = "~/Views/Shared/_Layout.cshtml";
	
}
@model CNDreams.Web.Areas.ModuleSys.Models.ModelSysUserRightManageIndex
<style type="text/css">
	#content
	{
		border: 1px solid #ccc;
	}
	#content-fixed
	{
		width: 650px;
	}
	.content-left
	{
		border-right: 1px solid #ccc;
		width: 250px;
		height: 100%;
		float: left;
		text-align: center;
	}
	.content-left #leftTree, .content-right #rightTree
	{
		float: left;
		margin: 1px 0 0 0;
		width: 200px;
		background: #fff;
		padding: 10px 0 0 0;
	}
	.content-middle
	{
		border-right: 1px solid #ccc;
		width: 110px;
		height: 100%;
		float: left;
		text-align: center;
	}
	.content-middle .move01
	{
		background: url("/Content/Images/move01.jpg") no-repeat;
		margin-top: 100px;
	}
	.content-middle .move02
	{
		background: url("/Content/Images/move02.jpg") no-repeat;
	}
	.content-middle .move03
	{
		background: url("/Content/Images/move03.jpg") no-repeat;
	}
	.content-middle .move04
	{
		background: url("/Content/Images/move04.jpg") no-repeat;
	}
	.content-middle input
	{
		border: 0px;
		width: 54px;
		height: 25px;
		margin: 10px;
		cursor: pointer;
	}
	.content-right
	{
		border-right: 1px solid #ccc;
		width: 250px;
		height: 100%;
		float: left;
		text-align: center;
	}
	.tree-content
	{
		width: 250px;
		height: 100%;
		overflow: auto;
		text-align: left;
	}
</style>
<script type="text/javascript">
	$(function () {
		$("#content").height($("html").outerHeight() - 10).width("100%");
		$(".tree-content").height($("html").outerHeight() - 30);
		$("#content-fixed").height($("html").outerHeight() - 10);

		/* 初始化树
		----------------------------------------------------------*/
		var tree = $("#leftTree,#rightTree").jstree({
			ui: { theme_name: "checkbox" },
			lang: {
				loading: "目录加载中……"  //在用户等待数据渲染的时候给出的提示内容，默认为loading
			},
			"types": {
				"valid_children": ["root"],
				"types": {
					"root": {
						"icon": {
							"image": "/Content/images/ico0.jpg"
						},
						"valid_children": ["default"],
						"max_depth": 2,
						"hover_node": false,
						"select_node": function () { }
					},
					"default": {
						"valid_children": ["default"],
						"icon": {
							"image": "/Content/images/ico1.jpg"
						}
					}
				}
			},
			"plugins": ["themes", "html_data", "ui", "types", "checkbox"]
		});

		//open_node,
		tree.bind("loaded.jstree", function (event, data) {
			tree.jstree("open_all");

			$("#rightTree .node1").each(function () {
				$(this).find("a[user-extra-right='false']").each(function () {
					$(this).parent().attr("id", "");
					$(this).children().remove();
				})
				$(this).find("a[node='2']").each(function () {
					if ($(this).parent().find("a[user-extra-right='true']").length == 0) {
						$(this).parent().attr("id", "");
						$(this).children().remove();
					}
				})
				if ($("#rightTree .node1").find("a[user-extra-right='true']").length == 0) {

					$(this).find("a[node=1]").children().remove();
				}
			})

		}).bind("open_node.jstree", function (event, data) {
			$("#rightTree .node1").each(function () {
				$(this).find("a[user-extra-right='false']").each(function () {
					$(this).parent().attr("id", "");
					$(this).children().remove();
				})
				$(this).find("a[node='2']").each(function () {
					if ($(this).parent().find("a[user-extra-right='true']").length == 0) {
						$(this).parent().attr("id", "");
						$(this).children().remove();
					}
				})
				if ($("#rightTree .node1").find("a[user-extra-right='true']").length == 0) {

					$(this).find("a[node=1]").children().remove();
				}
			})
		})
	})

	//全部向右移动
	function leftMoveAll(operateType) {


		top.window.$("#sysConfirm").html("确定要移动吗？");
		top.window.$("#sysConfirm").dialog({
			resizable: false,
			height: 200,
			title: "系统提示",
			modal: true,
			buttons: {
				"是": function () {

					// 存放所有菜单id
					var arrayId = new Array();
					//未选中菜单id
					$("#leftTree").jstree("get_unchecked", null, true).each(function (i, n) {
						if (n.id != "") {
							arrayId.push(n.id);
						}
					});
					//已选中菜单id
					$("#leftTree").jstree("get_checked", null, true).each(function (i, n) {
						if (n.id != "") {
							arrayId.push(n.id);
						}
					});

					submitMoveMenu(arrayId, operateType);

					top.window.$("#sysConfirm").dialog("close");
				},
				"否": function () {
					top.window.$("#sysConfirm").dialog("close");
				}
			}
		});
	}

	//提交
	function submitMoveMenu(arrayId, operateType) {
		//如果没有选中否不操作
		if (arrayId.length < 1) {
			return;
		}
		//添加到页面进行提交
		for (var i = 0; i < arrayId.length; i++) {
			$(".moveId").append('<input type="hidden" name="menuGuid" value="' + arrayId[i] + '" />');
		}

		$(".moveId").append('<input type="hidden" name="operateType" value="' + operateType + '" />');
		$("form").attr("action", "/ModuleSys/SysUserRightManage/MoveRoleMenu/").submit();
	}

	//选中项向右移动
	function leftMoveSelectItem(operateType) {
		top.window.$("#sysConfirm").html("确定要移动吗？");
		top.window.$("#sysConfirm").dialog({
			resizable: false,
			height: 200,
			title: "系统提示",
			modal: true,
			buttons: {
				"是": function () {

					// 存放所有菜单id
					var arrayId = new Array();
					//已选中菜单id
					$("#leftTree").jstree("get_checked", null, true).each(function (i, n) {
						if (n.id != "") {
							arrayId.push(n.id);
						}
					});

					submitMoveMenu(arrayId, operateType);

					top.window.$("#sysConfirm").dialog("close");
				},
				"否": function () {
					top.window.$("#sysConfirm").dialog("close");
				}
			}
		});
	}

	//全部向左移动
	function rightMoveAll(operateType) {
		top.window.$("#sysConfirm").html("确定要移动吗？");
		top.window.$("#sysConfirm").dialog({
			resizable: false,
			height: 200,
			title: "系统提示",
			modal: true,
			buttons: {
				"是": function () {

					// 存放所有菜单id
					var arrayId = new Array();
					//未选中菜单id
					$("#rightTree").jstree("get_unchecked", null, true).each(function (i, n) {
						if (n.id != "") {
							arrayId.push(n.id);
						}
					});
					//已选中菜单id
					$("#rightTree").jstree("get_checked", null, true).each(function (i, n) {
						if (n.id != "") {
							arrayId.push(n.id);
						}
					});
					submitMoveMenu(arrayId, operateType);

					top.window.$("#sysConfirm").dialog("close");
				},
				"否": function () {
					top.window.$("#sysConfirm").dialog("close");
				}
			}
		});
	}

	//选中项各大左移动
	function rightMoveSelectItem(operateType) {
		top.window.$("#sysConfirm").html("确定要移动吗？");
		top.window.$("#sysConfirm").dialog({
			resizable: false,
			height: 200,
			title: "系统提示",
			modal: true,
			buttons: {
				"是": function () {

					// 存放所有菜单id
					var arrayId = new Array();
					//已选中菜单id
					$("#rightTree").jstree("get_checked", null, true).each(function (i, n) {
						if (n.id != "") {
							arrayId.push(n.id);
						}
					});

					submitMoveMenu(arrayId, operateType);

					top.window.$("#sysConfirm").dialog("close");
				},
				"否": function () {
					top.window.$("#sysConfirm").dialog("close");
				}
			}
		});
	}
</script>
@using (Html.BeginForm("MoveRoleMenu", "SysUserRightManage", FormMethod.Post))
{
	@Html.HiddenFor(x => x.UserId)
	<div class="moveId">
	</div>
	<div class="tabs-container">
		<ul>
			<li id="current" class="tabActive"><a><span>分配权限</span></a></li>
			<li class="tabInactive"><a href="/ModuleSys/SysUserRightManage/CommunityRightManage/?userid=@Model.UserId">
				<span>小区权限</span></a></li>
		</ul>
	</div>
	<div id="content">
		<div id="content-fixed">
			<div class="content-left">
				<img src="/Content/Images/wfq-Role.gif" />
				<div class="tree-content">
					<div id="leftTree">
						<ul>
							@foreach (var node1 in Model.NonAssignedRoleMenuParent)
	   {
		   if (node1.Level == 1)
		   {
								<li><a href="javascript:void(0)">@node1.Name</a>
									@foreach (var node2 in Model.NonAssignedRoleMenuParent)
		 {
			 if (node2.Level == 2 && node2.ParentID == node1.ID)
			 {
										<ul>
											<li><a href="javascript:void(0)">@node2.Name</a>
												@foreach (var node3 in Model.NonAssignedRoleMenu)
			{
				if (node3.Level == 3 && node3.ParentID == node2.ID)
				{
													<ul>
														<li id="@node3.ID"><a href="javascript:void(0)">@node3.Name</a> </li>
													</ul>
				}
			}
											</li>
										</ul>
			 }
		 }
								</li>
		   }
	   }
						</ul>
					</div>
				</div>
			</div>
			<div class="content-middle">
				<input type="button" value="" class="move01" onclick="leftMoveAll('@Project.Common.EnumDirection.Left');" /><br />
				<input type="button" value="" class="move02" onclick="leftMoveSelectItem('@Project.Common.EnumDirection.Left')" /><br />
				<input type="button" value="" class="move04" onclick="rightMoveSelectItem('@Project.Common.EnumDirection.Right');" /><br />
				<input type="button" value="" class="move03" onclick="rightMoveAll('@Project.Common.EnumDirection.Right');" />
			</div>
			<div class="content-right">
				<img src="/Content/Images/yfq-Role.gif" />
				<div class="tree-content">
					<div id="rightTree">
						<ul>
							@foreach (var node1 in Model.AssignedRoleMenuParent)
	   {
		   if (node1.Level == 1)
		   {
								<li class="node1"><a href="javascript:void(0)" node="1">@node1.Name</a>
									<ul>
										@foreach (var node2 in Model.AssignedRoleMenuParent)
		  {
			  if (node2.Level == 2 && node2.ParentID == node1.ID)
			  {
							
											<li><a href="javascript:void(0)" node="2">@node2.Name</a>
												<ul>
													@foreach (var node3 in Model.AssignedRoleMenu)
			 {
				 if (node3.Level == 3 && node3.ParentID == node2.ID)
				 {
												
														<li id="@node3.ID"><a href="javascript:void(0)" @(Model.UserMenu.FirstOrDefault(x => x.ID == node3.ID) == null ? "user-extra-right=false" : "user-extra-right=true")>@node3.Name</a>
														</li>
												
				 }
			 }
												</ul>
											</li>
							
			  }
		  }
									</ul>
								</li>
		   }
	   }
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
}
